<template>
	<view>
		<view class="cu-tabbar-height"></view>
		<view class="cu-bar tabbar bg-white shadow foot">
			<block v-for="(item, index) in _tabbars.list" :key="item.name">
				<view
					v-if="!item.child && !item.bulge"
					class="action"
					:class="_PageCur == item.name ? 'text-green' : 'text-gray'"
					@click="NavChange"
					:data-cur="item.name"
					:data-path="item.path"
					:data-redirect="item.redirect"
					:data-text="item.text"
					:data-text2="item.text2"
				>
					<view v-if="item.iconType == 'image'" class="icon-image"><image :src="item.icon" class="image" /></view>
					<view v-else :class="item.icon">
						<view class="cu-tag badge" v-if="item.badge && item.badge != 0">
							<block v-if="item.badge != 1">{{ item.badge > 99 ? '99+' : item.badge }}</block>
						</view>
					</view>
					{{ item.text }}
				</view>
				<view v-else-if="item.child" class="action add-action text-gray" @click="togglePopup" :data-cur="item.name">
					<button class="cu-btn cuIcon-add bg-green shadow" v-if="popupName == ''"></button>
					<button class="cu-btn cuIcon-close bg-cyan shadow rotate360" v-else></button>
					{{ item.text }}
				</view>
				<view v-else class="action add-action text-gray" @touchstart="startNFC" @touchend="stopNFC">
					<button class="cu-btn bg-green shadow" :class="item.icon" v-if="popupName == ''"></button>
					{{ item.text }}
				</view>
			</block>
		</view>
		<!-- 底部发布弹窗 -->
		<uni-popup ref="popupTabbar" class="my-popup" :type="type" :custom="true" @change="change">
			<view class="uni-popupTabbar">
				<!--<view class="uni-popupTabbar-title">发布</view>-->
				<view class="uni-popupTabbar-content">
					<view
						v-for="(item, index) in _popupTabbarData"
						:key="index"
						class="uni-popupTabbar-content-box"
						:data-path="item.path"
						:data-cur="item.name"
						:data-redirect="item.redirect"
						@click="NavChange"
					>
						<view v-if="item.iconType == 'image'" class="uni-popupTabbar-content-image"><image :src="item.icon" class="image" /></view>
						<view v-else :class="[item.icon, item.color]">
							<view class="cu-tag badge" v-if="item.badge || item.badge == ''">{{ item.badge }}</view>
						</view>
						<view class="uni-popupTabbar-content-text">{{ item.text }}</view>
					</view>
				</view>
				<!--
				<view class="uni-popupTabbar-btn" @click="cancel('popupTabbar')">取消发布</view>
				-->
			</view>
		</uni-popup>
		<nfc ref="nfc" :visible="false" @onMessage="onHCEmessage" tip="请靠近教师端App"></nfc>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import nfc from '@/components/my-nfc/my-nfc.vue';
export default {
	name: 'my-tabbar',
	components: {
		uniPopup,
		nfc
	},
	data() {
		return {
			PageCur: 'home',
			type: 'bottom', //弹出层位置
			popupName: '', //弹出层名字
			popupTabbarData: []
		};
	},
	computed: {
		_tabbars() {
			return this.tabbars;
		},
		_popupTabbarData() {
			return this.popupTabbarData;
		},
		_PageCur() {
			return this.current || this.PageCur;
		}
	},
	props: {
		tabbars: {
			//数据列表
			type: Object,
			default() {
				return {}; //{list:[{text: "首页",path: "/pages/index/index",icon: "cuIcon-homefill",iconType: "font", //值image图片 、font字体图标(默认值) badge: "", name: "index",child: []}]}
			}
		},
		current: {
			type: String,
			default: ''
		}
	},
	methods: {
		NavChange: function(e) {
			var d = e.currentTarget.dataset;
			if (d.redirect) {
				this.goTo(e, true);
				return;
			}
			this.PageCur = d.cur;
			this.$emit('change', { name: this.PageCur, text: d.text, text2: d.text2 });
			this.cancel(this.popupName);
		},
		togglePopup(e) {
			var cur = e.currentTarget.dataset.cur;
			for (var i in this._tabbars.list) {
				var item = this._tabbars.list[i];
				if (item.name == cur) {
					this.popupTabbarData = item.child;
					break;
				}
			}
			if (this.popupName) {
				this.cancel(this.popupName);
			} else {
				this.type = 'bottom';
				this.popupName = 'popupTabbar';
				this.$refs[this.popupName].open();
			}
		},
		cancel(name) {
			name && this.$refs[name].close();
		},
		change(e) {
			if (!e.show) {
				this.popupName = '';
			}
		},
		goTo: function(e, redirect) {
			var d = e.currentTarget.dataset;
			var url = d.path;
			this.cancel(this.popupName);
			this.$util.goTo(url + '?tab=' + (redirect ? d.cur : this.PageCur));
		},
		startNFC() {
			this.$refs.nfc.startNFC();
		},
		stopNFC() {
			this.$refs.nfc.stopNFC();
		},
		onHCEmessage(e) {
			this.$emit('onHCEmessage', e);
		}
	}
};
</script>

<style lang="scss" scoped>
.cu-bar.tabbar .action {
	font-size: 30rpx;
}

.cu-bar.tabbar.foot {
	height: calc(105rpx + env(safe-area-inset-bottom) / 2);
}

.cu-tabbar-height {
	min-height: 122rpx;
	height: calc(122rpx + env(safe-area-inset-bottom) / 2);
}

.uni-popup {
	z-index: 1100;
}
.icon-image {
}
.icon-image {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40rpx;
	height: 40rpx;
	overflow: hidden;
	border-radius: 10upx;
}

.icon-image .image {
	width: 100%;
	height: 100%;
}

/* 底部分享 */
.my-popup.uni-popup,
.my-popup /deep/ .uni-popup {
	z-index: 1201;
}
.uni-popupTabbar {
	position: relative;
	background: #fff;
	margin-left: 50rpx;
	margin-right: 50rpx;
	border-radius: 20rpx;
	box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1);
	margin-bottom: 163rpx;
}

.uni-popupTabbar-title {
	line-height: 60upx;
	font-size: 24upx;
	padding: 15upx 0;
	text-align: center;
}

.uni-popupTabbar-content {
	display: flex;
	flex-wrap: wrap;
	padding: 15px;
	position: relative;
}

.uni-popupTabbar-content::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #ffffff;
	border-radius: 40px;
	z-index: 2;
}

.uni-popupTabbar-content:after {
	content: '';
	position: absolute;
	bottom: -16upx;
	left: 0;
	right: 0;
	margin: auto;
	width: 50upx;
	height: 50upx;
	transform: rotate(45deg);
	background: #fff;
	z-index: 1;
	border: none;
	box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
	border-radius: 2px;
}
.uni-popupTabbar-content [class*='cuIcon-'] {
	font-size: 50rpx;
}
.uni-popupTabbar-content-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 33%;
	box-sizing: border-box;
	z-index: 3;
}

.uni-popupTabbar-content-image {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80rpx;
	height: 80rpx;
	overflow: hidden;
	border-radius: 10upx;
}

.uni-popupTabbar-content-image .image {
	width: 100%;
	height: 100%;
}

.uni-popupTabbar-content-text {
	font-size: $uni-font-size-base;
	color: $uni-color-subtitle;
	padding-top: 5px;
	padding-bottom: 10px;
}

.uni-popupTabbar-btn {
	height: 90rpx;
	line-height: 90upx;
	border-top: 1px #f5f5f5 solid;
	text-align: center;
	color: #666;
}
</style>
